<template>
  <div class="other">
    <div class="top-item">
      <div class="item" :key="index" v-for="(item, index) in list">
        {{ item.text }}
        <span>{{ item.num }}</span>
      </div>
    </div>
    <div class="bottom-item">
      <div>
        <van-icon @click="chagelike" v-if="isLike" name="like" />
        <van-icon @click="chagelike" v-else name="like-o" />
      </div>
      <div>
        <van-icon @click="chageCollect" v-if="isCollect" name="star" />
        <van-icon @click="chageCollect" v-else name="star-o" />
      </div>
      <div>
        <van-icon name="cart" @click="shop" />
      </div>
    </div>
  </div>
</template>

<script>
import {
  getLikenum,
  getCollectnum,
  getCommentnum,
  addLike,
  addCollect,
  deletLike,
  deletCollect,
} from "@/api/interchangeable";
export default {
  name: "Other",
  props: {
    data: {
      type: Object,
      default: () => {},
    },
    userData: {
      type: Object,
      default: () => {},
    },
    ispurchase: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      list: [
        {
          text: "喜欢",
          num: 0,
        },
        {
          text: "收藏",
          num: 0,
        },
        {
          text: "评论",
          num: 0,
        },
      ],
      isLike: false,
      isCollect: false,
    };
  },
  computed: {},
  watch: {
    data(val) {
      this.init();
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    shop() {
      if (!this.userData) {
        return this.$Toast.fail("请先登录在评论");
      }
      this.$emit("shop", true);
    },
    chagelike() {
      if (!this.userData) {
        return this.$Toast.fail("请先登录在评论");
      }
      if (this.isLike) {
        deletLike({
          user_id: this.userData.id,
          goods_id: this.data.id,
        }).then((res) => {
          this.isLike = false;
          this.init();
        });
      } else {
        addLike({
          user_id: this.userData.id,
          goods_id: this.data.id,
        }).then((res) => {
          this.isLike = true;
          this.init();
        });
      }
    },
    chageCollect() {
      if (!this.userData) {
        return this.$Toast.fail("请先登录在评论");
      }
      if (this.isCollect) {
        deletCollect({
          user_id: this.userData.id,
          goods_id: this.data.id,
        }).then((res) => {
          this.isCollect = false;
          this.init();
        });
      } else {
        addCollect({
          user_id: this.userData.id,
          goods_id: this.data.id,
        }).then((res) => {
          this.isCollect = true;
          this.init();
        });
      }
    },
    userinit() {
      this.getuserCollect();
      this.getuserLike();
    },
    init() {
      this.islogin = true;
      this.getLikenum();
      this.getCollectnum();
      this.getCommentnum();
      if (this.userData && this.data.id) {
        this.userinit();
      }
    },
    getLikenum() {
      getLikenum({
        goods_id: this.data.id,
        user_id: "",
      }).then((res) => {
        this.list[0].num = res.data;
      });
    },
    getuserCollect() {
      getCollectnum({
        goods_id: this.data.id,
        user_id: this.userData.id,
      }).then((res) => {
        this.isCollect = !!res.data;
      });
    },
    getuserLike() {
      getLikenum({
        goods_id: this.data.id,
        user_id: this.userData.id,
      }).then((res) => {
        this.isLike = !!res.data;
        console.log(res.data, this.isLike);
      });
    },
    getCollectnum() {
      getCollectnum({
        goods_id: this.data.id,
        user_id: "",
      }).then((res) => {
        this.list[1].num = res.data;
      });
    },
    getCommentnum() {
      getCommentnum({
        goods_id: this.data.id,
        user_id: "",
      }).then((res) => {
        this.list[2].num = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.other {
  width: 100%;
  min-height: 200px;
  background: #ffffff;
  display: flex;
  padding: 27px 33px;
  margin-top: 16px;
  flex-direction: column;
  .top-item {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
  .bottom-item {
    display: flex;
    justify-content: space-around;
    margin-top: 0.2rem;
  }
}
</style>
